// node运行环境
// 开发环境webpack配置
const path = require('path')
// 引入html复制模板插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 引入提取css为单个文件插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 引入复制静态资源插件
const CopyPlugin = require('copy-webpack-plugin')
// 解析vue文件
const VueLoaderPlugin = require('vue-loader/lib/plugin')

// 导出
module.exports = {

  // 打包模式 development production
  mode: 'development',
  // 定义项目入口文件
  // 多入口，拆分
  // 代码分割
  entry: {
    main: './src/main.js',
    // demo: './src/demo.js',
    // user:'./src/user.js'
  },
  // 定义项目出口
  output: {
    // 打包生成的到的目录路径 只能使用绝对路径
    path: path.resolve('dist'),
    // 打包生成的文件名称
    // [name]文件名名称变量  [name]默认名称为main
    // [hash] 每次生成一个不重复字符串  [hash:位数] => 一般最少是6位
    // filename: 'js/[name]-[hash:8].js'
    // [contentHash] 根据单个文件内容来进行生成hash值  一般拆分代码所用
    // filename: 'js/[name]-[contentHash:8].js'
    filename: 'js/[name].js'
  },
  // loader模块
  module: {
    rules: [
      // 打包css文件
      // npm i -D style-loader css-loader
      {
        // 只匹配以.css结尾的文件
        test: /\.css$/,
        exclude: /(node_modules|aa)/,
        // use解析规则为 从右到左   或  从下到上
        // use: ['style-loader', 'css-loader']
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      // 打包scss
      // npm i -D style-loader css-loader sass-loader node-sass
      {
        // 只匹配以.scss结尾的文件
        test: /\.scss$/,
        exclude: /node_modules/,
        // use解析规则为 从右到左   或  从下到上
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          // sass解析loader
          'sass-loader'
        ]
      },
      // 图片处理 样式中的图片和html中的图片
      // npm i -D url-loader html-loader file-loader
      {
        test: /\.(gif|png|jpe?g)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 图片小于1kb，就会被base64处理
              // 优点: 减少请求数量(减轻服务器压力)
              // 缺点：图片体积会更大(文件请求速度更慢)
              limit: 1 * 1024,
              // [ext] 图片扩展名
              name: 'img/[name].[ext]',
              // 给打包后的文件指定访问前缀
              publicPath: '/'
            }
          }
        ]
      },
      // 让html中的图片也能进行打处理
      {
        test: /\.html$/,
        exclude: /node_modules/,
        // 处理html中的img(负责引入img,从而能被url-loader进行处理)
        use: ['html-loader']
      },
      // js兼容处理
      // npm i -D babel-loader @babel/core @babel/preset-env core-js
      {
        test: /\.jsx?$/,
        // 排除不去扫描目录
        exclude: /(node_modules|assets|staic)/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-react',
              '@babel/preset-env'
            ]
          ]
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  // 插件模块
  plugins: [
    new HtmlWebpackPlugin({
      title: '欢迎来到Webpack!!!!',
      template: path.resolve(__dirname, '../public/index.html'),
    }),
    // 提取样式为单个css文件
    new MiniCssExtractPlugin({
      // 指定提取出的css的文件名称
      // [hash] 防静态资源缓存
      // filename: 'css/[name]-[hash:8].css'
      filename: 'css/[name].css'
    }),
    // 复制静态资源
    new CopyPlugin({
      patterns: [
        {
          // 要复制源目录
          from: path.resolve(__dirname, '../src/assets/iconfont/'),
          // 目标目录位置
          to: path.resolve(__dirname, '../dist/iconfont')
        },
        {
          // 要复制源文件
          from: path.resolve(__dirname, '../src/assets/favicon.ico'),
          // 目标文件位置
          to: path.resolve(__dirname, '../dist/favicon.ico')
        }
      ]
    }),
    // vue解析插件
    new VueLoaderPlugin()
  ],
  // web服务配置 编译放在内存中
  devServer: {
    // 指定web服务家的根路径 / => 映射的真实的绝对地址是什么
    contentBase: path.resolve(__dirname, '../dist'),
    // 监视contentBase目录下的所有文件，一旦文件有变化则就会reload重载
    watchContentBase: true,
    watchOptions: {
      // 忽略文件  提高开发阶段，打包效率
      ignored: /node_modules/
    },
    // 端口号
    port: 8080,
    // 自动打开浏览器
    open: true,
    // 不要显示启动服务器的日志信息
    clientLogLevel: 'none',
    // 除了一些基本的启动信息以外，其他的内容都不要显示
    quiet: true,
    // 如果出错，不要全屏提示  一般用于 vue项目中开启 eslint后，因为你写的不规范导致页面看不见
    overlay: false,
    proxy: {
      // 规则
      // axios中相对地址开头的字符串
      '/api': {
        // 把相对地址中的域名 映射到 目标地址中
        // localhost:8080 => localhost:3000
        target: 'http://localhost:3000',
        // 修改host请求的域名为目标域名
        changeOrigin: true,
        // 请求uri和目标uri有一个对应关系
        // 请求/api/login ==> 目标 /v1/api/login
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  // 打包后对于代码跟踪错误所用
  //devtool: 'source-map'
  optimization: {
    // 拆分代码
    splitChunks: {
      chunks: 'all'
    }
  },
  // 忽略指定对包名不进行打包操作
  externals: {
    // key import中的导入的包名称  value 就是window对中的属性
    // jquery: 'jQuery'
    jquery: '$'
  },
  // 解析模块的规则
  resolve: {
    // 配置解析模块路径别名：优点简写路径，缺点路径没有提示
    alias: {
      // 定义一个@变量，可在import引入时使用
      '@': path.resolve(__dirname, '../src')
    },
    // 配置省略文件路径的后缀名称 import '@/index'
    // 如果省略，建议文件名称不要重名了
    extensions: ['.js', '.jsx', '.vue']
  }





}